<template>
  <transition name="slide">
    <div id="testRule">
      <div class="scroll"  ref="wrapper" :data="testRule" >
        <div>
          <div v-for="v of testRule">
            <div class="module img_grp cover">
              <img :src="v.img_url" alt="">
            </div>
            <div class="test_introduction">
              <div class="module test_info">
                <div class="test_title">
                  {{v.title}}
                </div>

                <div class="part">
                  <div>{{v.question_count}}</div>
                  <div>精选问题</div>
                </div>
                <div class="part">
                  <div>{{v.report_count}}</div>
                  <div>专业报告</div>
                </div>
                <div class="part">
                  <div>{{v.join_count}}</div>
                  <div>测试人数</div>
                </div>

              </div>

              <div class="module test_brief">
                <div class="header">
                  <div class="title_grp">
                    <div class="title_icon"></div>
                    测试简介
                  </div>
                </div>
                <div class="brief_content">
                  {{v.description}}
                </div>
              </div>

              <div class="module test_rule">
                <div class="header">
                  <div class="title_grp">
                    <div class="title_icon"></div>
                    测试须知
                  </div>
                </div>
                <div class="brief_content" v-html="v.guide ">

                </div>
              </div>
              <div class="test_btn pay_test" @click="payTest" v-if="v.is_free==0">
                购买测试 ￥9.9
              </div>
              <div class="test_btn into_test" @click="doTest" v-if="v.is_free==1 || v.is_buy ==1">
                进入测试
              </div>
              <div class="null null2"></div>
            </div>
          </div>
        </div>
      </div>
      <waiting v-if="!testRule"></waiting>
    </div>
  </transition>
</template>

<script>
  import Bscroll from "better-scroll"
  import {ease} from "../../common/js/ease";
  import { mapActions, mapGetters,mapMutations } from 'vuex'
  import Waiting from 'components/loading/loading'

  export default {
    name: 'TestRule',
    data(){
      return{
        tid:this.$route.params.tid,
        lastTid:'',
        // token:this.$cookies.get('token'),
        scrollToEasing: 'bounce',
      }
    },
    computed:{
      ...mapGetters(['getTestRule']),
      testRule(){
          return this.getTestRule
      }
    },
    mounted(){
      this.loadTestRule(this.tid)
      // this.getTestRule()
      this.scroll = new Bscroll(this.$refs.wrapper,{
        click:true,
      })
      this.lastTid = this.tid
    },
    methods:{
      ...mapActions(['loadTestRule']),
      ...mapMutations(['changeTestRule']),

      payTest(){
          let _this = this
          let test_id = this.tid
          let token = this.token
          this.axios({
            method:'post',
            url:'',
            data:{
              token,
              test_id,
            }
        }).then((res)=>{
          if(res.data.code ==300){
            this.$cookies.remove('token')
            this.$router.push({path: '/test_rule/' + test_id + ''})
          }else {
            let data = res.data
            _this.wxPay(data)
          }
          })

      },
      doTest(){
         const tid = this.$route.params.tid
         if(this.testRule.is_finish == 1){
           this.$router.push({path:'/result/' + tid +''})
           return
         }
         this.$router.push({path:'/test/'+ tid+ ''})
      },

      wxPay(data){
        let _this= this
        let configData=data
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', configData,
          function (res) {
            WeixinJSBridge.log(res.err_msg);
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              // this.$router.push({path: '/test/' + id + ''});
              _this.reload()

            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
              alert("用户取消支付!");
            } else {
              alert("支付失败!");
            }
          }
        );
      },

      reload(){
        this.getTestRule()
      },

      // getTestRule(){
      //   this.axios.get("/api/testRule.json?tid=" + this.tid).then(this.getSucc)
      // },
      getSucc(res){
        res = res.data
        if (res.ret && res.data) {
          const data = res.data
          this.testRule = data
        }
      },
    },
    activated(){
      this.scroll.scrollTo(0,0,0,ease[this.scrollToEasing])
      this.tid=this.$route.params.tid
      if(this.lastTid != this.tid){
        this.lastTid = this.tid
        this.changeTestRule()
        this.loadTestRule(this.tid)
      }
    },
    components:{
      Waiting
    }

  }
</script>

<style scoped>
  .scroll{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #f5f4f7;

  }
  #testRule{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 30;
  }
  .cover {
    width: 100%;
    height: 300px;
  }

  .test_introduction {
    padding: 0 20px 60px 20px;
  }

  .test_info {
    border-radius: 20px;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.08);
    padding: 50px 0;
    text-align: center;

  }

  .test_title {
    font-size: 36px;
    color: black;
    font-weight: bold;
  }

  .part {
    width: 200px;
    display: inline-block;
    margin-top: 50px;
  }

  .part div:nth-of-type(1) {
    font-size: 30px;
    color: black;
    font-weight: bold;
  }

  .part div:nth-of-type(2) {
    font-size: 24px;
    color: #666;
    margin-top: 14px;
  }

  .test_brief {
    padding: 0 20px;
    border-radius: 20px;
  }

  .test_rule {
    padding: 0 20px;
    margin-bottom: 70px;
    border-radius: 20px;
  }

  .module .header {
    width: 100%;
    height: 90px;
    line-height: 90px;
    border-bottom: solid 1px #e5e5e5;

  }

  .title_grp {
    width: 200px;
    float: left;
    font-size: 34px;
    font-weight: bold;
    color: black;
    position: relative;
  }

  .title_icon {
    width: 6px;
    height: 34px;
    border-radius: 3px;
    background: #059692;
    float: left;
    margin-top: 28px;
    margin-right: 20px;
  }

  .brief_content {
    font-size: 28px;
    color: #666;
    line-height: 60px;
    padding: 20px 20px 48px 35px;
  }

  .test_btn {
    width: 300px;
    height: 80px;
    border-radius: 40px;
    color: white;
    text-align: center;
    line-height: 80px;
    margin: 0 auto 8px auto;
  }

  .pay_test {
    background: #ff6d00;
  }

  .into_test {
    background: #059692;
  }

</style>
